<template>
  <div>
    <div class="list-box">
      <div class="head-box">
        <search-form
          ref="searchForm"
          :search-config="searchConfig"
          :label-width="150"
          @clear="clearSearch"
          @search="handleSearch"
        />
      </div>
      <c-permission-tabs v-model="activeType" code="tab">
        <el-tab-pane label="全部" name="all" opt-code="all">
          <List
            :no-request="noRequest"
            :active-type="activeType"
            :serach-filters="searchFilters"
            type="all"
          />
        </el-tab-pane>
        <el-tab-pane label="待开业" name="openup" opt-code="openup">
          <List :active-type="activeType" :serach-filters="searchFilters" type="openup" />
        </el-tab-pane>
        <el-tab-pane label="待执行" name="execute" opt-code="execute">
          <List :active-type="activeType" :serach-filters="searchFilters" type="execute" />
        </el-tab-pane>
        <el-tab-pane label="待审核" name="audit" opt-code="audit">
          <List :active-type="activeType" :serach-filters="searchFilters" type="audit" />
        </el-tab-pane>
      </c-permission-tabs>
    </div>
  </div>
</template>

<script>
import List from './list'

export default {
  name: 'OpenManage',
  components: { List },
  data() {
    return {
      activeType: '',
      searchFilters: [],
      noRequest: false,
      searchConfig: [
        { label: '门店', prop: 'shopCode', type: 'dialog',
          config: {
            defaultProps: { label: 'name', value: 'code' }
          },
          dialogConfig: {
            title: '门店',
            interfacePath: '/select-service/api/v1/shop/page',
            setting: [{ prop: 'code', title: '编码', width: 120 }, { prop: 'name', title: '名称', width: 250 }]
          }
        },
        { label: '客户', prop: 'clientCode', type: 'dialog',
          config: {
            defaultProps: { label: 'name', value: 'code' },
            apiHeader: {
              'permission-code': 'openmanage',
              'Permission-App': 'slm'
            }
          },
          dialogConfig: {
            title: '客户',
            interfacePath: '/select-service/api/v1/customer/page',
            setting: [{ prop: 'code', title: '编码', width: 120 }, { prop: 'name', title: '名称', width: 250 }]
          }
        },
        { label: '办事处', prop: 'officeCode', type: 'dialog',
          config: {
            defaultProps: { label: 'name', value: 'code' }
          },
          dialogConfig: {
            title: '办事处',
            interfacePath: '/select-service/api/v1/organization/page',
            filtersRaw: [{ 'id': 'isOffice', 'property': 'isOffice', 'value': '1', 'operator': '=' }],
            setting: [{ prop: 'code', title: '编码', width: 120 }, { prop: 'name', title: '名称', width: 250 }]
          }
        },
        {
          type: 'select',
          prop: 'marketType',
          label: '报图类型',
          filter: true,
          config: {
            filterable: false, // 是否允许输入关键字搜索
            remoteUrl: '/data-dict/api/v2/dictionary/MARKET_TYPE?appCode=slm&domainCode=marketing',
            defaultProps: { label: 'dictName', value: 'dictCode' }
          }
        },
        {
          type: 'select',
          prop: 'constType',
          label: '门店建设类型',
          filter: true,
          config: {
            filterable: false, // 是否允许输入关键字搜索
            remoteUrl: '/data-dict/api/v2/dictionary/CONST_TYPE?appCode=slm&domainCode=marketing',
            defaultProps: { label: 'dictName', value: 'dictCode' }
          }
        },
        {
          type: 'select',
          prop: 'bizmanType',
          label: '商家类型',
          filter: true,
          config: {
            filterable: false, // 是否允许输入关键字搜索
            remoteUrl: '/data-dict/api/v2/dictionary/BIZMAN_TYPE?appCode=slm&domainCode=marketing',
            defaultProps: { label: 'dictName', value: 'dictCode' }
          }
        },
        { label: '卖场建设项目号', prop: 'constCode', type: 'text', value: this.$route.query.constCode || '', placeholder: '', filter: true },
        {
          type: 'select',
          prop: 'decorationRange',
          label: '门店建设范围',
          filter: true,
          config: {
            filterable: false, // 是否允许输入关键字搜索
            remoteUrl: '/data-dict/api/v2/dictionary/DECORATION_RANGE?appCode=slm&domainCode=marketing',
            defaultProps: { label: 'dictName', value: 'dictCode' }
          }
        },
        {
          type: 'select',
          prop: 'constSchedule',
          label: '门店建设整体进度',
          filter: true,
          config: {
            filterable: false, // 是否允许输入关键字搜索
            remoteUrl: '/data-dict/api/v2/dictionary/BEFORE_CONST_SCHEDULE?appCode=slm&domainCode=marketing',
            defaultProps: { label: 'dictName', value: 'dictCode' }
          }
        },
        {
          type: 'select',
          prop: 'isDelay',
          label: '开业是否延期',
          filter: true,
          config: {
            filterable: false, // 是否允许输入关键字搜索
            remoteUrl: '/data-dict/api/v2/dictionary/BOOLEANS?appCode=slm&domainCode=marketing',
            defaultProps: { label: 'dictName', value: 'dictCode' }
          }
        },
        {
          type: 'select',
          prop: 'schedule',
          label: '开业进度',
          filter: true,
          config: {
            filterable: false, // 是否允许输入关键字搜索
            remoteUrl: '/data-dict/api/v2/dictionary/OPEN_SCHEDULE?appCode=slm&domainCode=marketing',
            defaultProps: { label: 'dictName', value: 'dictCode' }
          }
        }]
    }
  },
  computed: {},
  watch: {},
  // mounted() {
  //   if (this.$route.query.constCode !== undefined) {
  //     const data = { filtersRaw: [{ 'id': 'constCode', 'property': 'constCode', 'operator': 'like', 'value': this.$route.query.constCode }] }
  //     this.handleSearch(data)
  //     // this.$refs.searchForm.handleSearch()
  //   }
  // },
  mounted() {
    if (this.$route.query.constCode !== undefined) this.$refs.searchForm.handleSearch()
  },
  created() {
    if (this.$route.query.constCode !== undefined) this.noRequest = true
  },
  methods: {
    // 清空搜索条件
    clearSearch(data) {
      this.searchFilters = []
    },

    // 获取搜索条件
    handleSearch(data) {
      this.searchFilters = data.filtersRaw
    }
  }
}
</script>

<style lang="scss" scoped>
.colorSetRed{
  color: red;
}
.head-box{
}
.tableUpButton{
  margin: 10px;
}
  .button{
    margin: 0px !important;
    width: 100px;
    border: 1px solid #dcdcdc;
  }
  .down-button{
    color: black;
  }
  .form{
    border: 1px solid #dcdcdc;
    padding: 20px;
  }
</style>
